<template>
	<div id="MainBox">
	<!-- 		投诉信息管理页面-->
		<div id="line03">
			处理状态<el-select v-model="param.state01" placeholder="选择账号状态">
		        <el-option
		                v-for="item in CheckState"
		                :key="item.value"
		                :label="item.label"
		                :value="item.value">
		            <span style="">{{ item.label }}</span>
		        </el-option>
		    </el-select>
			处理人搜索<div id="line01">
				<el-input v-model="param.name01" placeholder="模糊查询姓名">
					<template slot="prepend">姓名</template>
				</el-input>
			</div>
			<el-button type="primary" @click="queryAll">查询</el-button>
		</div>
			<el-table
			        :data="list"
			        border
			        style="width: 100%">
			    <el-table-column
			            prop="complaintId"
			            label="投诉单号"
			            width="80">
			    </el-table-column>
			    <el-table-column
			            prop="reson"
			            label="投诉内容"
			            width="100">
			    </el-table-column>
				<el-table-column
				        prop="messageState"
						:formatter="stateFormatter02"
				        label="处理状态"
				        width="100">
				</el-table-column>
			    <el-table-column
			            prop="result"
			            label="处理反馈"
			            width="200">
			    </el-table-column>
				<el-table-column
				        prop="adminName"
				        label="处理人"
				        width="100">
				</el-table-column>
			    <el-table-column
			            prop="order.userName"
			            label="租用用户"
			            width="100">
			    </el-table-column>
			    <el-table-column
			            prop="order.cartAddress"
			            label="车位地址"
			            width="160">
			    </el-table-column>
			    <el-table-column
			            prop="order.cartTel"
			            label="车位主电话"
			            width="100">
			    </el-table-column>
				<el-table-column
				        prop="order.messageName"
				        label="物业名字"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.communityName"
				        label="小区名字"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.price"
				        label="车位单价"
				        width="100">
				</el-table-column>
				<el-table-column
				        prop="order.status"
						:formatter="stateFormatter"
				        label="订单状态"
				        width="100">
				</el-table-column>
				c.user_id,c.release_time,c.over_time,c.all_time
				<el-table-column
				        prop="order.startTime"
				        label="订单开始时间"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.overTime"
				        label="订单结束时间"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.assess"
				        label="该单评分"
				        width="100">
				</el-table-column>
				<el-table-column
				        prop="order.cart.available"
						:formatter="UsingFormatter"
				        label="车位是否可用"
				        width="100">
				</el-table-column>
				<el-table-column
				        prop="order.cart.releaseTime"
				        label="车位发布时间"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.cart.overTime"
				        label="车位停租时间"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="order.cart.allTime"
				        label="车位出租总时常(时)"
				        width="80">
				</el-table-column>
			    <el-table-column
			            label="消息反馈"
			            width="80">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="check01(scope.row)">投诉反馈</el-button>
							<el-dialog title="对投诉结果进行反馈" :visible.sync="dialogFormVisible02">
							    <el-form :model="checkNews02">
									<el-form-item label="投诉内容" label-width="120px">
									    <span  autocomplete="off">{{scope.row.reson}}</span>
									</el-form-item>
									<el-form-item label="租用用户" label-width="120px">
									    <span  autocomplete="off">{{scope.row.order.userName}}</span>
									</el-form-item>
									<el-form-item label="车位地址" label-width="120px">
									    <span  autocomplete="off">{{scope.row.order.cartAddress}}</span>
									</el-form-item>
									<el-form-item label="车位单价" label-width="120px">
									    <span  autocomplete="off">{{scope.row.order.price}}</span>
									</el-form-item>
									<el-form-item label="车位主电话" label-width="120px">
									    <span  autocomplete="off">{{scope.row.order.cartTel}}</span>
									</el-form-item>
							        <el-form-item label="处理消息" label-width="120px">
							            <el-input v-model="checkNews02.result" autocomplete="off"></el-input>
							        </el-form-item>
							    </el-form>
							    <div slot="footer" class="dialog-footer">
							        <el-button @click="dialogFormVisible02 = false">取 消</el-button>
							        <el-button type="primary" @click="check02()">确 定</el-button>
							    </div>
							</el-dialog>
						</template>
			    </el-table-column>
				<el-table-column
				        label="处理(减信誉)"
				        width="280">
				        <template slot-scope="scope">
							<el-button type="text" @click="open(scope.row.order.userId)">减租用者</el-button>
							<el-button type="text" @click="open(scope.row.order.cart.userId)">减出租者</el-button>
						</template>
				</el-table-column>
			</el-table>
			<el-pagination
			        background
			        layout="prev, pager, next"
			        :total="param.total"
			        :page-size="param.pageSize"
			        :current-page="param.current"
			        @next-click="next" @prev-click="prev">
			</el-pagination>
		</div>
</template>

<script>
	import $ from "jquery";
	export default{
		data:function(){
			return{list:[],
			//下为页面展示数组
			CheckState:[{value:0,label:"未处理投诉"},{value:1,label:"已处理投诉"},{value:2,label:"所有"},],
		    paramsend:{pageNum: 2, pageSize: 5, total: 5, current: 1,name01:"",state01:0,},
		    param: {pageNum: 2, pageSize: 5, total: 5, current: 1,name01:"",state01:0,},
			//下为更改弹框时展示及后续发送的内容
			checkNews02: {complaintId:0,result:"",sourceId:0,cartUser:0,cartId:0,},
			//elemanet-ui需要的变量
			dialogFormVisible02: false,
			}
		},
		created(){
			this.queryAll();
		},
		methods:{
			// 条件查询用户 参数：分页条件，处理用户用，该投诉的处理状态
			queryAll:function(){
				let fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/complaint/queryAll",
					headers:{"token":localStorage.getItem("token")},
					data:fthis.param,
					success:function (data) {
						fthis.list=data.list;
						// console.log(data.list)
					}
				})
			},
			//点击按钮弹出处理方法
			check01(row){
				this.dialogFormVisible02 = true;
				this.checkNews02.complaintId=row.complaintId;
				this.checkNews02.result=row.result;
				// this.checkNews02.sourceId=row.order.userId;
				// this.checkNews02.cartUser=row.order.cart.userId;
				// this.checkNews02.cartId=row.order.cartId;
			},
			//弹出框提交按钮，提交审核更改
			check02(){
				this.dialogFormVisible02 = false;
				let fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/complaint/complaintBack",
					headers:{"token":localStorage.getItem("token")},
					type:"put",
					data:{current:fthis.param.current,name01:fthis.param.name01,state01:fthis.param.state01,result:fthis.checkNews02.result,complaintId:fthis.checkNews02.complaintId},
					success:function (data) {
						let message="失败";
						message=data.message;
						fthis.$message({
							showClose: true,
							message: '审核'+message,
							type: 'success'
						});
						fthis.queryAll();
					}
				})
			},
			stateFormatter(row, column, cellValue, index){
				switch(cellValue){
					case "0": return '正在租用';
					case "1": return '已付款';
					default : console.error("错误的状态"+cellValue);
				}
			},
			stateFormatter02(row, column, cellValue, index){
				switch(cellValue){
					case 0: return '未处理投诉';
					case 1: return '已处理投诉';
					default : console.error("错误的状态"+cellValue);
				}
			},
			UsingFormatter(row, column, cellValue, index){
				switch(cellValue){
					case 0: return '车位可用';
					case 1: return '车位不可用';
					default : console.error("错误的状态"+cellValue);
				}
			},
			// 下面三个方法都是分页栏的方法
			prev: function () {
				this.param.current--;
				this.param.total-=5;
			},
			next: function () {
				this.param.current++;
				this.param.total+=5;
			},
			// search(current){
			// 	// console.log(current);
			// 	this.param.current=current;
			// 	this.queryAll();
			// },
			// 根据投诉对用户进行减信誉更改
			examineUpdate:function (userId,value) {
				// console.log(userId+","+value)
				var fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/user/creditUpdate",
					headers:{"token":localStorage.getItem("token")},
					type:"put",
					data:{userId:userId,value:value},
					success:function (data) {
						let message="失败";
						message=data.message;
						fthis.$message({
							showClose: true,
							message: '更改'+message,
							type: 'success'
						});
						fthis.queryAll();
					}
				})
			},
			open(userId) {
			this.$prompt('请输入减少信誉（1-49）', '扣除信誉度', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^([1-9]|[1-4][0-9])$/,
				inputErrorMessage: '输入格式不正确'
			}).then(({ value }) => {
				this.examineUpdate(userId,value)
				this.$message({
					type: 'success',
					message: '扣除用户信誉值：' + value
				});
			}).catch(() => {
			  this.$message({
				type: 'info',
				message: '取消输入'
			  });       
			});
			}
		},
		watch: {
		  param: {
		        //深度监听 监听对象中属性的变化以及集合中对象的变化
		      handler: function (novel, old) {
					this.queryAll();
		      },
		      deep: true
		  }
		}
	}
</script>

<style>
	#line01{
		width: 300px;
		white-space: nowrap;
		display:inline-block
	}
</style>
